<template>
  <div style="background: var(--el-bg-color-page); min-height: calc(100vh - 50px)">
    <header-manage :platform="platform" :form-data="formData" class="p10px" @edit="onPlatformEdit" />
    <div class="p10px rounded-10px">
      <!--数据看板-->
      <el-row v-if="platform.details" :gutter="10">
        <el-col v-for="(item, key) in platform.details.count" :key="key" :xs="12" :sm="12" :md="6" :lg="6" :xl="6" class="mb-10px">
          <num-data-card :title="item.title" :number="item.number" :img="countDataImg[key]" />
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="24">
          <div>
            <el-empty description="暂无数据" />
          </div>
        </el-col>
      </el-row>
    </div>
    <dk-form ref="editForm" :form-data="formData" top="5vh" is-dialog @submit="fetchPlatform" />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getPlatform } from '@/api/platform'
import { getWorkWechatEditForm } from '@/api/platform/work_wechat'
import HeaderManage from '@/views/platform/components/common/headerManage.vue'
import NumDataCard from '@/views/platform/components/common/numDataCard.vue'
import { getPlaid } from '@/utils/auth'

defineOptions({
  name: 'WorkWechatIndex'
})

const router = useRouter()
const editForm = ref(null)
const plaid = ref(0)

const platform = reactive({
  details: {
    count: null,
    setting: null
  }
})

const formData = ref(null)
const tableTest = reactive([
  {
    name1: '微信支付',
    value1: '已配置'
  },
  {
    name1: '企业付款到零钱',
    value1: '已配置'
  }
])

const countDataImg = {
  user: new URL('@/assets/icon/user.png', import.meta.url).href,
  order: new URL('@/assets/icon/order.png', import.meta.url).href,
  refund: new URL('@/assets/icon/refund.png', import.meta.url).href,
  transfer: new URL('@/assets/icon/transfer.png', import.meta.url).href
}

// 获取应用基本信息
const fetchPlatform = () => {
  getPlatform(plaid.value)
    .then((res) => {
      Object.assign(platform, res.data)
    })
    .catch(() => {
      router.push({ path: '/platform/list' })
    })
}

// 编辑应用
const onPlatformEdit = () => {
  getWorkWechatEditForm(platform.plaid).then((res) => {
    formData.value = res.data
    editForm.value.show()
  })
}

onMounted(() => {
  plaid.value = getPlaid()
  fetchPlatform()
})
</script>

<style lang="scss" scoped>
.platform_auth {
  :deep(.el-tag) {
    margin: 2px 10px;
  }
}

.box-card {
  :deep(.el-card__body) {
    overflow: auto;
  }
}
</style>
